<template>
    <div class="container">
        <div class="operate">
            <button v-if="showOperate" @click="restoreConfig()">Restore</button>
        </div>
        <ul>
            <!-- {'active': checkedGroup.indexOf(index) > -1 } 可以实现多选添加样式 -->
            <li v-for="(current, index) in currentConfiguration" :key="index"
                @click="changeConfiguration(current, index, $event)" :class="{'active': choosedIndex == (index+1) }">
                <span>
                    {{ current.name }}
                </span>
                <span>
                    <input v-model="current.value" type="checkbox">
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checkedGroup: [],
            configs: [],
            choosedIndex: 0,
            showOperate: false
        };
    },
    created() {
        console.log(2)
    },
    props: {
        currentConfiguration: {
            type: Array,
            default: []
        },
    },
    methods: {
        changeConfiguration(config, index, ev) {
            this.showOperate = true;
            if(!this.choosedIndex || this.choosedIndex != (index + 1)) {
                this.choosedIndex = index + 1;
            } else {
                this.choosedIndex = 0;
            }
            // 实现单行的多选加样式
            /* if(this.checkedGroup.indexOf(index) == -1) {
                this.checkedGroup.push(index);
            }else {
                let spliceIndex = this.checkedGroup.indexOf(index);
                this.checkedGroup.splice(spliceIndex, 1);
            } */
        },
        restoreConfig() {
            console.log(this.currentConfiguration)
        }
    },
    computed: {
       
    }
};
</script>
<style scoped>
.operate {
    height: 20px;
    text-align: right;
}

.container ul li {
    margin: 5px 5px;
    cursor: pointer;
}

.active {
    background: red;
}
</style>
